<template>
  <div class="app-container" style="padding: 20px;">
    <div style="margin-bottom: 10px">
      <el-card>
        <div style="display: flex;font-size: 20px;font-weight: 700">'
          <div style="width: 70%;display: flex">
            <div>教案名称：{{ lessonPlan.lplanName }}</div>
            <div>创建时间：{{
                lessonPlan.createTime
              }}
            </div>
          </div>
          <div style="display: flex;justify-content: right;width: 30%">
            <el-button type="primary" class="common-button" v-print="print">教案打印</el-button>
          </div>
        </div>

      </el-card>

    </div>
    <div>
      <mavon-editor id="printArea" ref='md' :subfield="false" :toolbars="toolbarsObj" defaultOpen="preview"
                    :editable="false" v-model="lessonPlan.lplanMain"
      >
      </mavon-editor>
      <!-- 隐藏的打印区域 -->
      <div id="printArea" style="display: none;"></div>
    </div>
  </div>
</template>

<script>
import {getTecherLessonPlan} from "@/api/TecherLessonPlan/TecherLessonPlan";

export default {
  name: "lessonPlanMainComponents",
  data() {
    // let that = this

    return {
      print: {
        id: "printArea",
        popTitle: "教案打印", // 打印配置页上方的标题
        // extraHead: "打印", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: "预览的标题", // 打印预览的标题
        previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          // console.log("正在加载预览窗口！");
          // console.log(that.msg, this);
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          // console.log("已经加载完预览窗口，预览打开了！");
        }, // 预览窗口打开时的callback
        beforeOpenCallback() {
          // console.log("开始打印之前！");
        }, // 开始打印之前的callback
        openCallback() {
          // console.log("执行打印了！");
        }, // 调用打印时的callback
        closeCallback() {
          // console.log("关闭了打印工具！");
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() {
          // console.log("点击v-print绑定的按钮了！");
        },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: "",
        extarCss: "",
      },
      lessonPlan: {},
      toolbarsObj: {
        // bold: true, // 粗体
        // italic: true, // 斜体
        // header: true, // 标题
        // underline: true, // 下划线
        // strikethrough: true, // 中划线
        // mark: true, // 标记
        // superscript: true, // 上角标
        // subscript: true, // 下角标
        // quote: true, // 引用
        // ol: true, // 有序列表
        // ul: true, // 无序列表
        // link: true, // 链接
        // imagelink: true, // 图片链接
        // code: true, // code
        // table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        // /* 1.3.5 */
        // undo: true, // 上一步
        // redo: true, // 下一步
        // trash: true, // 清空
        // save: true, // 保存（触发events中的save事件）
        // /* 1.4.2 */
        navigation: true, // 导航目录
        // /* 2.1.8 */
        // alignleft: true, // 左对齐
        // aligncenter: true, // 居中
        // alignright: true, // 右对齐
        /* 2.2.1 */
        // subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    };
  },
  created() {
    const lessonPlanId = this.$route.params && this.$route.params.lessonPlanId;
    this.getLessonPlanById(lessonPlanId)
  },
  methods: {
    printContent() {
      // 获取 mavon-editor 的内容
      console.log(this.$refs.md)

      const editorContent = this.$refs.md.value;
      console.log(editorContent + "---")
      // 将内容插入到隐藏的打印区域
      const hiddenPrintArea = document.getElementById('printArea');
      hiddenPrintArea.innerHTML = editorContent;
      // 打印隐藏的打印区域
      this.$nextTick(() => {
        console.log(this, "666-----")
        // this.printContent;
      });
    },
    getLessonPlanById(lessonPlanId) {
      getTecherLessonPlan(lessonPlanId).then(res => {
        this.lessonPlan = res.data
      })
    }

  }
};
</script>
<style media="print" lang="scss">
// 修改页边距
@page {
  //size: auto;
  //margin: 3mm;
}

// 媒体查询， 打印时修改样式
@media print {
  #printArea {
    width: 100%;
    zoom: 0.8;
    margin: 0 auto;
  }
  .el-table {
    border: 3px solid #606060;
  }
  .el-table__header-wrapper {
    border-bottom: 3px solid #606060;
  }
  .el-table > .el-table__header-wrapper > .el-table__header > thead > tr > th {
    border-right: 3px solid #606060 !important;
  }
  .el-table > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > td {
    border-bottom: 3px solid #606060 !important;
    border-right: 3px solid #606060 !important;
  }
}
</style>
